<template>
  <a-layout-footer style="text-align: center">
    乾哥在线电子书
  </a-layout-footer>
</template>

<script lang="ts">
import {onMounted} from "vue";
import {Tool} from "@/util/tool";
import {notification} from 'ant-design-vue';

export default ({
  name: 'theFooter',
  setup() {
    let websocket: any;
    let token: any;

    const onOpen = () => {
      console.log("webSocket连接成功，状态码：", websocket.readyState);
    };
    const onMessage = (event: any) => {
      console.log("webSocket收到消息：", event.data);
      notification['info']({ message:'收到消息', description:event.data,})
    };
    const onError = () => {
      console.log("webSocket连接错误，状态码：", websocket.readyState);
    };
    const onClose = () => {
      console.log("webSocket连接关闭，状态码：", websocket.readyState);
    };
    // 初始化
    const initWebSocket = () => {
      websocket.onopen = onOpen;
      websocket.onmessage = onMessage;
      websocket.onerror = onError;
      websocket.onclose = onClose;
    }
    onMounted(() => {
      if ('WebSocket' in window) {
        // 10位随机 64进制字符串
        token = Tool.uuid(10);
        websocket = new WebSocket(process.env.VUE_APP_WS_SERVER + '/ws/' + token);
        initWebSocket();

        // 关闭
        /// websocket.close();
      } else {
        alert('当前浏览器不支持webSocket');
      }
    })
  }
});
</script>

<style scoped>

</style>